.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.container {
    box-sizing: border-box;
    padding: 10px;
}
.rowCol {
    box-sizing: border-box;
    height: 50px;
    background-color: #eee;
    border: 1px solid #999;
    padding: 10px;
    margin: 10px;
    float: left;
}
.col-md-4 {
    width: calc( 33.3333% - 20px );
}
.col-sm-3 {
    width: calc(25% - 20px);
}
@media screen and (min-width: 768px){
   .col-md-3{
       width: calc(25% - 20px);
   } 
   .col-md-6{
       width: calc(50% - 20px);
   }
   .col-md-1{
       width: calc(8.333% - 20px);
   }
   .col-md-2{
        width: calc(16.666% - 20px);
   }
}
@media screen and (max-width: 768px){
    .col-sm-6{
        width: calc(50% - 20px);
    }
    .col-sm-12{
        width: calc(100% - 20px);
    }
    .col-sm-3{
        width: calc(25% - 20px);
    }
    .col-sm-2{
        width: calc(16.666% - 20px);
    }
    .col-sm-8{
        width: calc(66.6666% - 20px );
    }
}